<template>
	<view class="label">
		<view class="title">
			我是一个...的人
			<view class="">
				选择3~5个标签，可以更精准的为你推荐用户
			</view>
		</view>
		<view class="labelListBox">
			<view class="labelList">
				<view :class="act.includes(n.id)?'act':''" v-for="n in list" @click="checkedBox(n.id)">
					{{n.label}}
				</view>
			</view>
		</view>
		<view :class="act.length>0?'btn':'btn Disabled' " @click="createMemberUserTag()">
			选好了
		</view>
	</view>
</template>

<script>
	import {
		getMemberLabel,
		createMemberUserTag,
		getMemberUserTag,
		updateMemberUserTag
	} from "@/api/user.js";
	export default {
		data() {
			return {
				list: [],
				act: [],
				updata: "",
			}
		},
		onLoad(e) {
			this.getMemberLabel()
			if (e.updata == 1) {
				this.updata = 1
				this.getMemberUserTag()
			}
		},
		methods: {
			async getMemberUserTag(e) {
				const data = await getMemberUserTag()
				this.act = data.data
			},
			async getMemberLabel(e) {
				const data = await getMemberLabel()
				this.list = data.data
			},

			checkedBox(val) {
				this.actid = val
				if (this.act.includes(val)) {
					this.act.splice(this.act.indexOf(val), 1)
					return
				}
				this.act.push(val)
				console.log(this.act)
			},
			createMemberUserTag() {
				if (this.act.length > 0) {
					if (this.updata) {
						updateMemberUserTag(this.act).then(res => {
							uni.showToast({
								title: '提交成功',
								duration: 2000,
								icon: 'none',
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1, //返回层数，2则上上页
								})
							}, 2000)
						})
					}else{
						createMemberUserTag(this.act).then(res => {
							uni.showToast({
								title: '提交成功',
								duration: 2000,
								icon: 'none',
							})
							setTimeout(() => {
								uni.navigateTo({
									url: `../Addavatar/Addavatar`
								})
							}, 2000)
							
						})
					}
				} else {
					uni.showToast({
						title: '请填选择标签',
						icon: "none",
						duration: 2000
					});
				}

			}
		}

	}
</script>

<style lang="less" scoped>
	.label {
		padding-top: 169rpx;
		background-color: #fff;
		min-height: 100vh;
		box-sizing: border-box;
		padding-bottom: 20rpx;
	}


	.btn {
		width: 397rpx;
		height: 85rpx;
		background: linear-gradient(90deg, #DB88FC 0%, #7B66FE 100%);
		border-radius: 43rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 85rpx;
		margin: auto;
	}

	.Disabled {
		background: linear-gradient(103deg, #7C66FE80 0%, #DB88FC80 100%);
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(42, 41, 48, 0.35);
	}

	.title {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #333333;
		text-align: center;

		view {
			margin-top: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #999999;
		}
	}

	.labelListBox {
		min-height: 800rpx;
	}

	.labelList {
		padding: 90rpx 91rpx;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		flex-wrap: wrap;


		&>view {
			min-width: 120rpx;
			height: 58rpx;
			background: #F2F2F2;
			border-radius: 60rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
		}

		.act {
			background: linear-gradient(95deg, #DA88FC 0%, #7C67FE 100%);
			color: #fff;
			position: relative;

			&::after {
				content: "";
				display: inline-block;
				width: 15rpx;
				height: 15rpx;
				background-image: url(@/static/mine/act.png);
				background-size: 100% 100%;
				position: absolute;
				top: 8rpx;
				right: 12rpx;
			}
		}


	}
</style>